<template>
  <p class="read-the-docs">home 页面dd红烧豆腐活动时间发给花洒</p>
  <div>{{ name }}</div>
  <div class="box">
    <!-- 
      selection-change: 多选框点击监听
      row-click: 点击行（必须定义ref）
      highlight-current-row: 给点击的行加背景
    -->
    <el-table ref="tableRef" :data="tableData" @selection-change="handleSelectionChange" @row-click="handleRowSelect" highlight-current-row>
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="Id" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="age" label="Age" />
    </el-table>
    <div>选择结果： {{ multipleSelection }}</div>
  </div>
  <div @click="btnSetup">script setup</div>
  <div @click="btnExport">script export</div>
  <div @click="btnDefineComponent">script defineComponent</div>
</template>
<script setup>
    import { useRouter } from 'vue-router'
    import { ref } from 'vue'
    const tableRef = ref()
    
    const router = useRouter()
    const name = "张三"
    const btnSetup = () => {
        router.push('/IndexSetup')
    }
    const btnExport = () => {
        router.push('/IndexExport')
    }
    const btnDefineComponent = () => {
        router.push('/IndexDefineComponent')
    }


    const tableData = [
  {
    id: 1,
    name: "张三",
    age: 10,
  },
  {
    id: 2,
    name: "李四",
    age: 11,
  },
  {
    id: 3,
    name: "王五",
    age: 12,
  },
  {
    id: 4,
    name: "赵六",
    age: 13,
  },
];
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  // console.log(val);
};

const handleRowSelect = (row) => {
  // tableRef.value = tableRef.value.toggleRowSelection(row, undefined);
  if (tableRef && tableRef.value && typeof tableRef.value.toggleRowSelection === 'function') {
    tableRef.value.toggleRowSelection(row, undefined);
  }
}

</script>

<style scoped>
.read-the-docs {
  color: #888;
}

</style>
